<template>
	<rh-wx class="store-write-success-container">
		<template>
			<view class="app-status-content flex-column">
				<image class="app-icon" src="@/static/image/logo.png" mode="aspectFill"></image>
				<view class="status-content flex-center">
					<u-icon name="checkmark-circle" size="28" color="#EA0000"></u-icon>
					<text class="status-txt">激活成功</text>
				</view>
			</view>
			<view class="top-content">
				<view class="top-label">
					卡券内容
				</view>
				<view class="content-val flex-between">
					<image class="card-icon" :src="activity.coverUrl" mode=""></image>
					<text class="label-txt">{{activity.activityName}}</text>
				</view>
			</view>
			<view class="tc-content" v-if="serves.length">
				<view class="tc-label">服务内容</view>
				<view class="tc-list">
					<view class="item flex-between" v-for="(item,index) in serves">
						<text class="item-txt">{{item.serveDetails}}</text>
						<text class="item-txt">到期时间：{{item.endTime}}</text>
					</view>
				</view>
				<view class="tc-total flex-between">
					<text class="total-label">核销累计</text>
					<text class="total-money">￥ {{activity.writeOffPrice}}</text>
				</view>
			</view>
			<view class="js-content">
				<view class="js-label">结算单位</view>
				<view class="js-val">{{shopName}}</view>
			</view>
			<view class="btn-content">
				<rh-submit-btn text="继续激活其他卡券" :submit-action="submit"></rh-submit-btn>
			</view>
		</template>
	</rh-wx>
</template>

<script>
	import {getWxCode, getUrlCode, isWechat, replaceWxUrl} from '@/script/wx-premission.js'
	import {getOpenId, getActivityInfo} from '@/api/store/index.js'
	import wechat from '@/script/wechat.js'
	import wxSDK from 'jweixin-module'
	export default {
		data() {
			return {
				isWechat: isWechat(),
				activity: {},
				serves: [],
				shopName: '',
				openId: '',
			}
		},
		onLoad(e) {
			if(!this.isWechat) return
			let code = getUrlCode('code')
			if(code) {
				this.getOpenId(code)
			}else{
				getWxCode(location.href)
			}
		},
		methods: {
			async getOpenId(code){
				let _self = this, isSuccess = true
				await getOpenId({code}).then(res => {
					let {code, msg} = res
					if(code == 200){
						_self.openId = res.msg
						_self.getActivityInfo()
					}
					isSuccess = true
				}).catch((err) => {
					let data = err.data
					if(data.code == 501){
						replaceWxUrl()
						getWxCode(location.href)
					}
				})
				return isSuccess
			},
			getActivityInfo(){
				let _self = this
				let params = {
					openId: _self.openId,
					orderId: getUrlCode('id')
				}
				getActivityInfo(params).then(res => {
					let {serves = [], activity = {}, shopName = ''} = res.data || {}
					_self.serves = serves
					_self.activity = activity
					_self.shopName = shopName
				}).catch(r =>{
					let {code} = r.data
					if(code == 501){
						_self.$$router.replace({name: 'storeActiveFail'})
					}
				})
			},
			submit(val){
				let _self = this
				return new Promise((resolve, reject) => {
					if (wechat?.isWechat()) {
						wechat.callScanQRCode()
					}
					resolve(true)
				})
			},
		}

	}
</script>
<style lang="scss" scoped>
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.store-write-success-container{
		min-height: 100vh;
		background-color: #F4F8F9;
		padding: 0 20rpx 180rpx;
		.app-status-content{
			align-items: center;
			padding-top: 100rpx;
			.app-icon{
				width: 196rpx;
				height: 196rpx;
				border-radius: 6rpx;
			}
			.status-content{
				margin-top: 60rpx;
				.status-txt{
					margin-left: 20rpx;
					@include fontStyle(#444444, 28rpx);
				}
			}
		}
		.top-content{
			padding-top: 60rpx;
			.top-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.content-val{
				margin-top: 40rpx;
			}
			.card-icon{
				width: 86rpx;
				height: 54rpx;
				border-radius: 6rpx;
				background-color: #fff;
			}
			.label-txt{
				margin-left: 30rpx;
				flex: 1;
				@include fontStyle(#3E3E3E, 32rpx);
			}
		}
		.js-content{
			margin-top: 22rpx;
			padding: 20rpx 20rpx 50rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.js-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.js-val{
				margin-top: 50rpx;
				@include fontStyle(#7F7F7F, 28rpx);
			}
		}
		.tc-content{
			align-items: center;
			margin-top: 40rpx;
			padding: 20rpx 20rpx 40rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.tc-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.tc-list{
				flex: 1;
				margin-top: 32rpx;
				.item{
					margin-bottom: 26rpx;
					.item-txt{
						@include fontStyle(#7F7F7F, 28rpx);
					}
				}
			}
			.tc-total{
				padding-top: 26rpx;
				border-top: 1rpx dashed #D8D8D8;
				.total-label{
					@include fontStyle(#7F7F7F, 28rpx);
				}
				.total-money{
					@include fontStyle(#000000, 28rpx);
				}
			}
		}
	}
</style>


